<!-- 店铺列表公用组件 author：zcl -->
<template>
  <view>
    <view
      class="shop-item"
      :style="{
        marginTop: marginTB,
        marginBottom: marginB,
        marginLeft: marginLR,
        marginRight: marginLR,
        padding: paddingTB + ' ' + paddingLR
      }"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <view class="shop-item-top">
        <image class="shop-item-top-img" :src="returnStoreImg(item.storeLogo)"></image>
        <view class="shop-item-top-store">
          <view class="shop-item-top-store-1">
            <view class="shop-item-top-store-1-t store-name-wrap">
              {{ item.storeName }}
              <view style="display: flex">
                <image class="vip-icon" :src="item.rightIcon" style="width: 112rpx; height: 28rpx" @tap.stop="toRightsPage" v-if="item.rightIcon" />
                <image class="vip-icon" :src="item.activityLogo" style="width: 112rpx; height: 28rpx; margin-left: 6rpx" v-if="item.activityLogo" />
              </view>
            </view>
          </view>
          <view class="shop-item-top-r" @tap.stop="gotoshop(item)">进店看看</view>
        </view>
      </view>
      <view class="shop-item-bot" v-if="isHome" style="justify-content: flex-start">
        <view class="i_item" v-for="(_item, idx) in item.goodsEsVoList" :key="idx" @tap="fGoTo(`/pages-mall/goods/detail?goodsId=${_item.goodsId}`)">
          <image mode="aspectFit" class="img-105 border-radius-2" :src="returnUrl(_item.imgUrl)" />
          <view class="tal" style="width: 204rpx">
            <view class="shop-item-bot-name" style="max-width: 204rpx">
              <image class="shop-item-bot-img1" v-if="![0].includes(_item.type)" :src="returnlg(_item.type)" />
              <text>{{ _item.title }}</text>
            </view>
            <view class="shop-item-bot-cas">
              CAS：
              <text style="color: #333">{{ _item.cas }}</text>
            </view>
            <view
              class="goodsNItem-c-price numberFont"
              v-html="gPrice(_item.priceMin, _item.unitName, _item)"
              @click.stop="gLogin(_item.priceMin, _item)"
            ></view>
          </view>
        </view>
      </view>
      <view class="shop-item-bot" v-else style="justify-content: flex-start">
        <view
          class="i_item"
          v-for="(_item, idx) in item.goodsEsRespList"
          :key="idx"
          @tap="fGoTo(`/pages-mall/goods/detail?goodsId=${_item.goodsId}`)"
        >
          <image mode="aspectFit" class="img-105 border-radius-2" :src="returnUrl(_item.imgUrl)" />
          <view class="tal" style="width: 204rpx">
            <view class="shop-item-bot-name" style="max-width: 204rpx">
              <image class="shop-item-bot-img1" v-if="![0].includes(_item.type)" :src="returnlg(_item.type)" />
              <text>{{ _item.title }}</text>
            </view>
            <view class="shop-item-bot-cas">
              CAS：
              <text style="color: #333">{{ _item.cas }}</text>
            </view>
            <view
              class="goodsNItem-c-price numberFont"
              v-html="gPrice(_item.priceMin, _item.unitName, _item)"
              @click.stop="gLogin(_item.priceMin, _item)"
            ></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";

export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 显示店铺类型
    showShopType: {
      type: Boolean,
      default: false
    },
    // item 上下的margin
    marginTB: {
      type: String,
      default: "0rpx"
    },
    marginB: {
      type: String,
      default: "0rpx"
    },
    // item 左右的margin
    marginLR: {
      type: String,
      default: "0rpx"
    },
    // item 上下的padding
    paddingTB: {
      type: String,
      default: "0rpx"
    },
    // item 左右的margin
    paddingLR: {
      type: String,
      default: "0rpx"
    },
    // 图片大小
    imgWidth: {
      type: String,
      default: "220rpx"
    },
    // home页
    isHome: {
      type: Boolean,
      default: false
    }
  },

  mounted() {},

  data() {
    return {};
  },
  computed: {
    ...mapState(["versionFlag"])
  },
  methods: {
    returnStoreImg(url) {
      return url ? this.config_url.imageUrl + url : "";
    },
    returnUrl(str) {
      return str ? this.config_url.imageUrl + str : "https://staticcdn.youliao.com/static/image/www_m/main/default.png";
    },
    returnlg(type) {
      if (type) {
        if (type === 1 && this.versionFlag) return "/static/img/tag_b.png";
        if (type === 2 && this.versionFlag) return "/static/img/tag_d.png";
        if (type === 3 && this.versionFlag) return "/static/img/tag_bd.png";
        if (type === 4 && this.versionFlag) return "/static/img/tag_w.png";
      }
    },
    // 进店
    gotoshop(item) {
      if (item.id == 1) {
        uni.navigateTo({
          url: `/pages-shop/shopHome?id=${item.id}`
        });
      } else {
        uni.navigateTo({
          url: `/pages-shop/shopDetailList?id=${item.id}`
        });
      }
    },
    // 去有料宝
    toRightsPage() {
      // uni.navigateTo({ url: "/pages-charge/index" });
    }
  }
};
</script>
<style lang="scss">
@import "@/static/newCommon.scss";
.shop-item {
  background: #fff;
  .img-105 {
    width: 210rpx;
    height: 210rpx;
    display: block;
    border: 1rpx solid #f3f3f3;
    border-radius: 8rpx;
  }
  &-top {
    @extend .flex-left;

    &-img {
      width: 96rpx;
      height: 96rpx;
      border: 1rpx solid #f3f3f3;
      display: inline-block;
      @extend .flex-shrink;
    }
    &-store {
      @extend .flex-between;
      @extend .flex-grow;
      @extend .ml-8;
      &-1-t {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }
      &-1-attr {
        padding: 2rpx 8rpx;
        @extend .border-radius-2;
        @extend .font-size-12;
        @extend .c-c30;
        @extend .mt-8;
        width: fit-content;
        border: 2rpx solid #306ef0;
      }
    }
    &-r {
      width: 144rpx;
      height: 56rpx;
      color: #f0780e;
      border: 1px solid #f0780e;
      // background-image: linear-gradient(90deg, #336bf5 0%, #3ea9ff 100%, #3e85ff 100%);
      // background-image: linear-gradient(142deg, #f79054 0%, #f0780e 100%);
      border-radius: 28rpx;
      flex-shrink: 0;
      @extend .flex-center;

      @extend .font-size-12;
      font-weight: bold;
    }
  }
  &-bot {
    @extend .mt-10;
    @extend .flex-around;
    &-name {
      @extend .ellipsis;
      @extend .c-c18;
      @extend .font-size-14;
    }
    &-cas {
      width: 100%;
      @extend .c-c98;
      @extend .mt-4;
      @extend .mb-6;
      @extend .font-size-12;
      @extend .ellipsis1;
    }
    &-img1 {
      vertical-align: middle;
      width: 68rpx;
      height: 24rpx;
      @extend .mb-3;
      @extend .mr-5;
    }
    &-img4 {
      vertical-align: middle;
      @extend .mb-3;
      width: 52rpx;
      height: 24rpx;
      @extend .mr-5;
    }
    &-price {
      @extend .c-ced;
    }

    .i_item {
      margin-right: 14rpx;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}

.store-name-wrap {
  display: flex;
  flex-direction: column;
}
</style>
